@import "mobile-commom.scss";
*{
    margin: 0;
    border: 0;
    header{
        position: fixed;
        background-color: white;
        z-index: 999;
        @include box-page1 (750,130);
        // 顶部导航
      .topnav{
          position: absolute;
          top: vw(48);
          left: vw(23);
          display: flex;
          justify-content: space-between;
          align-items: center;
        @include box-page1 (705,57);
               //  返回按钮
               .back_btn{
                border-radius: vw(15);
            @include box-page1(123,57);
            button{
                outline-style: none;
                font-size: vw(26);
                border-radius: vw(15);
                @include box-page1(123,57);
                border: solid vw(2) #ff9344;
            }
            }
            // 分类
            .pro_title{
                @include box-page1(105,26); 
                span{
                    font-size: vw(26);
                    color: #000000;
                }
            }
            .topnav_icon{
                @include box-page1 (52,50); 
                img{
                    @include box-page1 (52,50);   
                }
            }
      }  
    }
    // 主体
    main{
        margin-top: vw(130);
        margin-bottom: vw(130);
        overflow: scroll;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        @include box-page1(750,1100);
        height: auto;
        // 产品图片
     .pro_pic{
         padding-bottom: vw(36);
        @include box-page1(705,260);
        img{
            @include box-page1(705,260); 
        }
     }
    //  产品信息
     .pro_info{
     display: flex;
     justify-content: space-between;
     flex-direction: column;
     padding-bottom: vw(36);
    @include box-page1(666,144);
    // 价格
    .price{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        @include box-page1(666,57);
        .price_left{
        @include box-page1(136,57);
        span{
         @include box-page1(136,57); 
         font-size: vw(72); 
         color: #ff9344;
        }
        }
        .price_right{
        border-radius: vw(15);
        @include box-page1(111,59);
        background-color: #ff9344;
        a {
            font-size: vw(30);
            color: white;;
         text-decoration: none;
        }    
        }
    }
    // 好评
    .good_comment{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        @include box-page1(666,36);
      .good_comment_left{
          display: flex;
          align-items: center;
        @include box-page1(200,36);  
        img{
            @include box-page1(38,36); 
        } 
        .left_words{
            font-size: vw(30);
        }
        .left_number{
            font-size: vw(30);
            color: #ff9344; 
        }

      } 
      .good_comment_right{
        @include box-page1(170,26); 
        span{
            font-size: vw(26);
            color: #8e8e8e;
         @include box-page1(165,26); 
        } 
      } 
    }
     }
    //  适用商店范围
     .use_range_shop{
        @include box-page1(666,666); 
        // 适用范围标题
        .use_range_shop_title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: vw(10);
            background-color: #ff9344;
            @include box-page1(664,67); 
            .urs_titleleft{
                padding-left: vw(11);
                @include box-page1(120,31);
                span{
                    font-size: vw(30);
                    color: #ffffff;
                }   
            }  
            .urs_titleright{
                padding-right: vw(9);
                @include box-page1(23,25);
                a{
                    color:#ffffff;
                    text-decoration: none;
                    @include box-page1(23,25);  
                    img{
                        @include box-page1(23,25);  
                    }
            } 
            } 
        }
        // 商店列表
        .shop_list{
            @include box-page1(666,1100);  
            height: auto; 
            // 第一栏商店
            .shop_f1{
                position: relative;
                display: flex;
                flex-direction: row;
                padding-bottom: vw(9);
               @include box-page1(666,176);    
            // 左边图片
            .left_pic{
                position: relative;
               @include box-page1(177,176);
               img{
               
                @include box-page1(177,176);   
               }  
               .pic_words{
                opacity: 0.6;
                background-color: white;
                position: absolute;
                left: 0;
                top: vw(91);
                width: 100%;
                height: vw(39);
                text-align: center;
                font-size: vw(24);
                font-family: MicrosoftYaHei;
                line-height: vw(40);
                
             }  
            }

            //  右边详细信息
            .right_info{
                position: relative;
                margin-left: vw(24);
               @include box-page1(260,176); 
            //    商店名
               .shop_name{
                   position: absolute;
                   top: vw(13);
                   left: 0;
                   @include box-page1(300,31);  
                   span{
                       font-size: vw(30);
                   }
               }
            //    商店评价
               .shop_comment{
                   display: flex;
                   align-items: center;
                   position: absolute;
                   top: vw(55);
                   left: 0;
                   @include box-page1(270,34);
                   img{
                   @include box-page1(36,34);   
                   }
                   span{
                       padding-left: vw(13);
                       font-size: vw(26);
                       color: #929292;
                   }    
               }
            //    和我距离
               .your_distanse{
                   position: absolute;
                   top: vw(102);
                   @include box-page1(115,24); 
                   span{
                       font-size: vw(24);
                       color: #929292;
                   }    
               } 
            //    查看详细
               .shop_desc{display: flex;
                   align-items: center;
                   position: absolute;
                   top: vw(148);
                   @include box-page1(140,20); 
                   a{
                       @include box-page1(140,20); 
                       text-decoration: none;
                       font-size: vw(20);
                       color: #ff9344;
                   }  
               }  
       
            }
            // 进入按钮
            .enter_btn{
                position: absolute;
                right: 0;
               @include box-page1(111,176);  
               button{
                   position: absolute;
                   top: vw(67);
                   right: 0;
                   border-radius: vw(15);
                   background-color: #ff9344;
                   color: white;
                   @include box-page1(111,59); 
                   a{
                       text-decoration: none;
                       font-size: vw(30);
                       color: white;
                   }
               }  
            }
              }
            //   商店第二栏
              .shop_f2{
                  @extend.shop_f1;
              }
            //   商店第三栏
              .shop_f3{
                  @extend.shop_f1;
              }
               //   商店第四栏
               .shop_f4{
                @extend.shop_f1;
            }

         }  
       }
    }
}